<template>
  <div>
    <mt-tab-container v-model="selected">

      <mt-tab-container-item id="首页">
        <mt-cell>
          <img src="../../../assets/phone/index/index.jpg" slot="icon" style="width: 100%;display:block">
        </mt-cell>
        <div style="display: flex; background-color: white">
          <router-link to="home" class="imgIcon">

            <img slot="" src="../../../assets/phone/icon/rental_housing.png" width="38" height="38">
            <label>整租房源</label>
          </router-link>
          <router-link to="home" class="imgIcon">
            <img slot="" src="../../../assets/phone/icon/rental_housing.png" width="38" height="38">
            <label>合租房源</label>
          </router-link>
          <router-link to="home" class="imgIcon">
            <img slot="" src="../../../assets/phone/icon/rental_housing.png" width="38" height="38">
            <label>短期租赁</label>
          </router-link>
          <router-link to="home" class="imgIcon">
            <img slot="" src="../../../assets/phone/icon/rental_housing.png" width="38" height="38">
            <label>地图找房</label>
          </router-link>
        </div>
        <mt-search v-model="search" style="height: auto">
          <!--<mt-cell
            v-for="item in result"
            :title="item.title"
            :value="item.value">
          </mt-cell>-->
        </mt-search>


        <div class="housings">
          <div class="housing-hd">
            <h3 class="biaoti">今日特惠 <span style="float: right;color:#ee9900;font-size: 16px">更多></span></h3>

          </div>
          <div class="housings-md">

            <swiper :options="swiperOption" style="">
              <div class="swiper-slide" v-for="banner in banners" style="width: 204px">
                <router-link :to="{path:'/report/detail',query:{roomId:1}}" class="">
                  <img slot="" :src="banner" style="width:204px;height:134px;">
                  <div class="housing-info" style="padding: 3%">
                    <p class="name">江南区菜鲜丰星级市场2【23-7】</p>
                    <span class="num" style="float: left">1480   <span class="unit">元/月</span></span>

                    <span style="float: right">原价 :   <span>1780元</span></span>


                  </div>
                </router-link>
              </div>
            </swiper>
          </div>


        </div>
      </mt-tab-container-item>

    </mt-tab-container>


  </div>
</template>
<script>
    import * as mint from 'mint-ui';
    import 'swiper/dist/css/swiper.css'

    import {swiper, swiperSlide} from 'vue-awesome-swiper'

    import {logout} from '@/api/login.js'
    import Swiper from 'swiper'

    Swiper.use({
        name: 'pluginName',
        params: {
            pluginSwitch: false,
        },
        on: {
            init() {
                if (!this.params.pluginSwitch) return
                console.log('init')
            },
            // swiper callback...
        }
    })
    export default {
        name: "text",
        components: {
            ...mint,
            swiper,
            swiperSlide

        },

        data() {
            return {
                'galleryElements': '',
                'selected': '首页',
                'search': '',
                swiperOption: {
                    slidesPerView: 'auto',
                    spaceBetween: 10,
                    freeMode: true

                },
                banners: ['http://image.quanfangtong.net/Company_20170806105236JeUAyW/cotenant/mcq34uvhf.jpg', 'http://image.quanfangtong.net/Company_20170806105236JeUAyW/cotenant/mcq34uvhf.jpg'],
                loginInfo: {
                    'avatar': null,
                    'username': 'text'
                }
            }

        },
        mounted: function () {
            // current swiper instance
            // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
            console.log('this is current swiper instance object', this.swiper)
            this.swiper.slideTo(3, 1000, false)
            console.log(this.$route.params);
        },
        computed: {
            swiper() {

                return this.$refs.mySwiper.swiper
            }
        }, methods: {
            onOk() {
                logout().then((res) => {
                    window.location.href = "/";
                })
            }
        }, created() {

        }
    }

</script>
<style>

  .main_context {
    flex-direction: column;
    justify-content: center;
    display: flex;
    width: 33.3%;
    text-align: center;
    border-right: 1px solid #EEEEF1;
    border-bottom: 1px solid #EEEEF1;
    padding: 3%;
  }


  .main_notice .content {
    float: left;
    width: 12%;
    margin-right: 4%;
    color: #7E7E7E;
  }

  .main_notice {
    height: 20%;
    background: #fff;
    width: 100%;
  }

  .main_top {
    background: url('../../../assets/phone/index/background.png');
    background-size: 100%;
    /*height: 24%;*/
    width: 100%;
    vertical-align: middle;
    text-align: center;
  }

  .imgIcon {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

  }

  a {
    text-decoration: none !important;
    color: rgba(0, 0, 0, 0.65) !important;
  }

  .housings {
    background-color: white;
  }

  .housings h3 {
    font-size: 16px;
    color: #333333;
    font-weight: normal;
    line-height: 18px;
    border-left: 3px solid #3696fe;
    padding-left: 7.5px;

  }

  .housings .housing-hd {
    display: flex;
    align-items: center;
    height: 44px;
    border-bottom: 1px solid #dcdcdc;
    padding: 3% 3% 0px 3%;
  }

  .biaoti {
    float: left;
    width: 100%;
  }

  .housings-md {
    padding: 3%;
  }

  .housing-info .name {
    font-size: 16px;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .main_line {
    height: 1%;
  }

  .ant-layout-header {
    display: none;
  }
</style>


